<template>
  <view class="device-container">
	<image class="bg-img" src="/static/images/indexBg.jpg"/>
	<view class="u-demo-block__content bg-white device-nav">
		<u-tabs :list="spaceList" @click="spaceTabSelect">
			<view
				slot="right"
				style="padding-left: 4px;"
				@tap="spacePop"
			>
			<text class="baseicon-more text-blue more-nav"/>
			</view>
		</u-tabs>
	</view>
	<uni-popup ref="spacePopTop" type="top" :maskClick="true" @change="popChange">
				<view class="space-padding bg-white">
					<image class="space-img" src="/static/images/spaceBg.jpg"/>
					<view class="grid flex-sub col-5 grid-square">
						<view class="space-item"  
						 v-for="(item,index) in spaceList" :key="index">
						 <view class=""><text class="baseicon-edit text-blue text-xl space-edit" @tap="spaceEdit(item)"/><text class="baseicon-delete text-blue text-xl space-delete" @tap="spaceDelete(item)"/></view>
						 <view class="space-body">
						 <view class="">{{item.name}}</view>
						 <view class="">{{item.deviceNum?item.deviceNum:0}}个设备</view>
						 </view>
						</view>
						<view class="space-item" @tap="spaceAdd">
							<view class="space-add"><text class="baseicon-addsign"/></view>
						</view>
					</view>
				</view>
	</uni-popup>
	<view class="cu-bar search">
		<view class="search-form round">
			<text class="cuIcon-search"></text>
			<input @blur="searchDeviceBlur" :disabled="popIsOpen" :adjust-position="false" type="text" placeholder="搜索设备" confirm-type="search"></input>
		</view>
			<text class="baseicon-add text-blue add-nav" @tap="addDevice"/>
	</view>
	<view class="nav-list" style="font-size: 14px;">
		<view hover-class="none" class="nav-li bg-white" 
		  v-for="(item,index) in spaceDeviceList" :key="index">
			<device :deviceObj="item" @renewData="spaceTabSelect(curSpace)"/>
		</view>
	</view>
	<view class="cu-modal show" v-if="showDeviceModal">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class="content">添加设备</view>
				<view class="action" @tap="hideDeviceModal">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="baseicon-qrcode qrcode-add text-grey" @tap="qrCodeAdd"></text>
					<input :adjust-position="false" type="text" placeholder="请输入MAC" v-model="searchDeviceVal" confirm-type="search"></input>
				</view>
				<view class="action" style="margin-right: 20rpx;">
					<button class="cu-btn bg-green shadow-blur round" @tap="searchDevice">搜索</button>
				</view>
			</view>
			<view class="cu-form-group text-left">
				<view class="title">所在房间</view>
				<input name="input" :value="[curSpace.name]" disabled ></input>
			</view>
			<view class="cu-form-group text-left">
				<view class="title">设备命名</view>
				<input name="input" @blur="renameDeviceName" placeholder="请输入设备命名" :value="addDeviceForm.name"></input>
			</view>
			<view class="cu-dialog" @tap.stop="" v-if="addDevices.length>0">
				<radio-group class="block" @change="radioChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in addDevices" :key="index">
							<label class="flex justify-between align-center flex-sub">
								<view class="">
									<view class="device-name"><view class='cu-tag bg-black margin-right-xs' style="border-radius: 15rpx; margin-bottom: 10rpx; margin-top: 10rpx;">{{item.categoryName}}</view>{{item.productName}}</view>
									<view class="">MAC:{{item.deviceName}}</view>
								</view>
								<radio class="round" :class="radio=='radio' + index?'checked':''" :checked="radio=='radio' + index?true:false"
								 :value="index"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
			<view class="cu-bar bg-white justify-end">
				<view class="action">
					<button class="cu-btn line-blue text-blue" @tap="hideDeviceModal">取消</button>
					<button class="cu-btn bg-blue margin-left" @tap="submitDeviceForm">确定</button>
	
				</view>
			</view>
		</view>
	</view>
	<view class="cu-modal show" v-if="showSpaceModal">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class="content">{{mangeSpaceType}}房间</view>
				<view class="action" @tap="hideSpaceModal">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view class="cu-form-group text-left" v-if="mangeSpaceType=='添加'||mangeSpaceType=='修改'">
				<view class="title">房间名</view>
				<input placeholder="请输入房间名"  @blur="spaceNameText" name="input" :value="[mangeSpaceType=='修改'?editSpaceForm.name:'']"></input>
			</view>
			<view class="padding-xl bg-white" v-if="mangeSpaceType=='删除'">
				确定删除房间{{editSpaceForm.name}}？
			</view>
			<view class="cu-bar bg-white justify-end">
				<view class="action">
					<button class="cu-btn line-blue text-blue" @tap="hideSpaceModal">取消</button>
					<button class="cu-btn bg-blue margin-left" @tap="submitSpaceModal">确定</button>
				</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
import { getSpaces,getDevicesBySpaceId,addSpace,saveSpace,delSpace } from "@/api/system/space"
import { findDevice,addDevice } from "@/api/system/device"
import device from "@/components/device"
  export default {
	components:{
		device
	},
    data() {
      return {
        spaceList: [],
		addDevices:[],
		searchDeviceVal:'',
		addDeviceForm:{
			spaceId: "",
			spaceName: "",
			deviceId: "",
			name: "",
		},
		editSpaceForm:{
			id:"",
			name:""
		},
		popIsOpen:false,
		spaceDeviceList: [],
		showDeviceModal:false,
		showSpaceModal:false,
		curSpace:{},
		mangeSpaceType:'',
        scrollLeft: 0
      }
    },
	async onShow(){
		await this.getSpaces()
		this.spaceTabSelect(this.spaceList[0])
	},
	created(){
	},
    methods: {
		async getSpaces(){
			let home = this.$store.state.user.home
			await getSpaces(home.id).then(res => {
					this.spaceList=res
				})
		},
		spaceTabSelect(e) {
			this.curSpace=e
			getDevicesBySpaceId(e.id).then(res => {
				this.spaceDeviceList=res
			})
		},
		renameDeviceName(e){
			this.addDeviceForm.name=e.detail.value
		},
		spaceNameText(e){
			this.editSpaceForm.name=e.detail.value
		},
		addDevice(){
			this.popIsOpen=true
			this.showDeviceModal=true
			this.addDeviceForm.spaceId=this.curSpace.id
			this.addDeviceForm.spaceName=this.curSpace.name
		},
		submitDeviceForm(e) {
			this.$modal.loading("保存中...")
			addDevice(this.addDeviceForm).then(res => {
				this.popIsOpen=false
				this.showDeviceModal = false
				this.$modal.closeLoading()
				this.spaceTabSelect(this.curSpace)
			})
		},
		hideDeviceModal(){
			this.showDeviceModal = false
		},
		submitSpaceModal(e) {
			this.$modal.loading("操作中...")
			if(this.mangeSpaceType=="添加"){
				addSpace(this.editSpaceForm).then(res => {
					this.showSpaceModal = false
					this.getSpaces()
					this.$modal.closeLoading()
				})
			}else if(this.mangeSpaceType=="修改"){
				saveSpace(this.editSpaceForm).then(res => {
					this.showSpaceModal = false
					this.getSpaces()
					this.$modal.closeLoading()
				})
			}else{
				delSpace(this.editSpaceForm.id).then(res => {
					this.showSpaceModal = false
					this.getSpaces()
					this.$modal.closeLoading()
				})
			}
		},
		hideSpaceModal(e) {
			this.showSpaceModal = false
		},
		qrCodeAdd(){
			uni.scanCode({
				 success: function (res) {
					 this.$modal.showToast('扫码内容:'+res.result)
				 }
			 });
		},
		radioChange(e) {
			this.addDeviceForm.name=this.addDevices[e.detail.value].productName
			this.addDeviceForm.deviceId=this.addDevices[e.detail.value].deviceId
		},
		searchDevice(){
			if(!this.searchDeviceVal){
				this.$modal.showToast('请输入MAC')
				return
			}
			this.$modal.loading("搜索中...")
			findDevice({"mac":this.searchDeviceVal}).then(res => {
				this.addDevices=res
				this.$modal.closeLoading()
			})
		},
		spacePop(){
			this.$refs['spacePopTop'].open();
		},
		spaceEdit(e){
			this.mangeSpaceType='修改'
			this.editSpaceForm = e
			this.showSpaceModal = true
		},
		spaceAdd(e){
			this.mangeSpaceType='添加'
			this.showSpaceModal = true
		},
		searchDeviceBlur(e){
			this.$modal.showToast(e.detail.value)
		},
		popChange(e){
			this.popIsOpen=e.show
		},
		spaceDelete(e){
			if(this.spaceList.length==1){
				this.$modal.showToast('至少保留一个房间')
				return
			}
			this.mangeSpaceType='删除'
			this.editSpaceForm = e
			this.showSpaceModal = true
		}
    }
  }
</script>

<style lang="scss">
	.device-container{
		background:transparent;
	}
	.more-nav{
		font-size: 50rpx;
		margin-right: 15rpx;
	}
	.add-nav{
		font-size: 60rpx;
		margin-right: 10rpx;
	}
	.qrcode-add{
		font-size: 50rpx;
		margin-left: 20rpx;
	}
	.device-name{
		display: -webkit-flex;
		align-items: center;
	}
	.space-img{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.space-item{
		background-color: white;
		border-radius: 15rpx !important;
		text-align: center;
	}
	.space-body{
		display: inline-grid;
		margin-top: 5rpx;
	}
	.space-edit{
		font-size: 40rpx;
		margin-left: 5rpx;
		margin-top: 5rpx;
		float: left;
	}
	.space-delete{
		font-size: 40rpx;
		margin-right: 5rpx;
		margin-top: 5rpx;
		float: right;
	}
	.space-add{
		margin: 49rpx;
	}
	.device-nav{
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 99;
	}
	.space-padding{
		padding: 20rpx 20rpx 0rpx 20rpx;
	}
</style>
